<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>立方体</title>
    <style>
        div {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .out {
            height: 200px;
            width: 200px;
            margin: 100px auto;
            transform-style: preserve-3d;
            animation-name: turn;
            animation-duration: 5s;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
            animation-play-state: running;
        }

        .out:hover {
            animation-play-state: paused;
        }

        .box {
            position: relative;
            height: 200px;
            width: 200px;
            /*设置子元素变换后保留3d效果*/
            transform-style: preserve-3d;
            /* perspective: 2000px; */
            transform: rotateX(45deg) rotateY(45deg);
        }

        .box>div {
            position: absolute;
            width: 200px;
            height: 200px;
            font-size: 20px;
            border: 3px solid white;
            background-color: rgba(72, 219, 251, .1);
        }

        .box span {
            display: block;
            width: 120px;
            margin: 30px auto;
        }

        .box .front {
            transform: translateZ(100px);
        }

        .box .top {
            transform: translateY(-100px) rotateX(90deg) rotateZ(-90deg);
        }

        .box .left {
            transform: translateX(-100px) rotateX(-90deg) rotateY(-90deg);
        }

        .box .right {
            transform: translateX(100px) rotateY(90deg);
        }

        .box .bottom {
            transform: translateY(100px) rotateX(-90deg);
        }

        .box .back {
            transform: translateZ(-100px) rotateY(180deg) rotateZ(90deg);
        }

        @keyframes turn {
            from {
                transform: rotateY(0deg)
            }

            to {
                transform: rotateY(360deg)
            }
        }
    </style>
</head>

<body>
    <div class="out">
        <div class="box">
            <div class="front"><span>落叶的一生，只是为了归根么。</span></div>
            <div class="top"><span>规则就是用来打破的!</span></div>
            <div class="left"><span>我宁愿犯错误，也不愿什么都不做。</span></div>
            <div class="right"><span>断剑重铸之日，其势归来之时。</span></div>
            <div class="bottom"><span>哪一个比较沉重，你的剑刃，还是你的过去?</span></div>
            <div class="back"><span>我不是英雄，我只是个拿锤子的小炮。</span></div>
        </div>
    </div>
</body>

</html>